<template>
	<div class="loginbg"> <!--登录页背景-->
		<div class="loginFrm"> <!--登录框-->
			<el-form :model="user" label-width="70px" width="420px" :rules="formRules" class="demo-ruleForm">
				<!--标题-->
				<div align="center">
				  <h1 style="font-size: 30px; color: #669966;">	登录</h1>
				  <h5 style="color: #80848c">
					欢迎登录校园志愿者服务系统
				  </h5>
				</div>
				<!--字段输入项容器-->
				<el-form-item label="用户名" prop="username" style="width:95%">
				  <el-input v-model="user.username" />
				</el-form-item>
				<el-form-item label="密码" prop="password" style="width:95%">
				  <el-input v-model="user.password" show-password/>
				</el-form-item>		
				<!--登录按钮-->
				 <el-button @click="login" type="success" plain style="width:90%; ">登 录</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import{ ref, reactive, getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	
	// 组合式API，变量无需再堆在data中，哪里用到在哪定义即可，this也不再使用
	let { proxy } = getCurrentInstance();
	let user=ref({username:'',password:''}) // 直接定义user无法实现双向绑定，需要用到ref实现响应式数据，不然无法与template中的user对应起来
	
	const router=useRouter()	
	function login(){
		proxy.$http.post('/login.ctl',user.value)
		.then(res => {
			if(res.data.message == "用户名或密码错误"){
				alert("用户名或密码错误")
			}else if(res.data.user.available==0){
				alert("账号已冻结")
			}else if(res.data.message == "登陆成功"){
				window.sessionStorage.setItem('loginUser',res.data.user.name)
				window.sessionStorage.setItem('userId',res.data.user.id)
				window.sessionStorage.setItem("token",res.headers.token)
				window.sessionStorage.setItem("password",res.data.user.password) 
				let menu_data=[]  //后台获取当前用户拥有的菜单结构构造数组
				let button_data=[]
				res.data.user.roles.forEach((role)=>{
					role.resources.forEach((resource)=>{
						let obj={}
						// 只显示菜单，不显示按钮
						if(resource.type==1 && resource.available==1){
							obj.resource_description = resource.description
							obj.router = resource.router.slice(1,resource.router.length);
							menu_data.push(obj)
						}else if(resource.type==0 && resource.available==1){
							obj.resource_description = resource.description
							button_data.push(obj)
						}
					})
				})
				sessionStorage.setItem("menu_data", JSON.stringify(menu_data)); //储存菜单信息，用于生成框架内左侧菜单信息)
				sessionStorage.setItem("button_data", JSON.stringify(button_data)); 
				router.push('/home')	// 路由跳转至home
			}
		})
		.catch(err => {
			console.log(err)
		});
	}	
	
	const formRules = reactive({
		username: [
		 {required: true, message: '请输入用户名', trigger: 'blur'}, //非空校验
		 {min: 9, max: 11, message: '用户名长度应为2至10个字符', trigger: 'blur'},  //长度校验
		],		
		password: [
		  {required: true, message: '请输入密码', trigger: 'blur'},
		  {min: 9, max: 11, message: '密码长度应为2至10个字符', trigger: 'blur'}
		],		
	})
</script>

<style>
	.loginbg{
		width:1536px;	
		height:697px;
		background:url("/loginBg.png");
		background-size:100%;
		display:flex; /*弹性布局*/ 
		margin-left: -8px;
		margin-top: -8px;
	}
	.loginFrm{
		width:500px;
		height:320px;
		background: rgba(255,255,255,0.8);
		border-radius:5px; /*圆角*/
		margin:auto; /*上下左右都居中*/
		padding-top:20px;	
		font-weight: bold;
	}
</style>
